//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    swiperIndex: "", // 默认调用动画的index  先设置为空字符串  防止打开页面时在手机端出现页面打开时动画已经执行完毕的问题
    imgUrl: 'https://www.wzym2m.com/mpos-images/image/readme/3.jpg',
    barWidth: 0,   // 下方进度条的宽度
    swiperList: [
      {
        title: "第一页",
        explain: "我来自第一页"
      },
      {
        title: "第二页",
        explain: "我来自第二页"
      },
      {
        title: "第三页",
        explain: "我来自第三页"
      },
      {
        title: "第四页",
        explain: "我来自第四页"
      },
      {
        title: "第五页",
        explain: "我来自第五页"
      },
      {
        title: "第六页",
        explain: "我来自第六页"
      }
    ]
  },

  // 调用动画
  getSwiperIndex: function (e) {  
    var index = e.detail.current; // 通过swiper组件触发的bindchange事件  接收当前所在页的index
    this.runAnimation(index);     // 调用执行动画的函数  传入接收的index
  },

  // 动画函数
  runAnimation: function (index) {
    var count = this.data.swiperList.length;   // 根据总页数
    this.setData({
      swiperIndex: index,                      // 把swiperIndex变量赋值为当前所在页的index  动态的添加带有动画效果的类
      barWidth: 100 / count * (index + 1)      // 获取当前页进度条应有的宽度
    })
  },
  
  onLoad: function () {
    var that = this;
    setTimeout(function () {
      that.runAnimation(0)  // 进入页面  延迟调用动画函数 并传入第一页的index
    }, 50)
  }
})
